import NavBar from '@/components/NavBar'
import { logout } from '@/store/actions/login'
import { editProfile, getProfile, updataPhoto } from '@/store/actions/profile'
import { List, DatePicker, Drawer, Toast, Modal } from 'antd-mobile'
import dayjs from 'dayjs'
import React, { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router'
import EditInput from './components/EditInput'
import EditList from './components/EditList'
import styles from './index.module.scss'
const { Item } = List
export default function ProfileEdit() {
  const dispatch = useDispatch()

  const fileRef = useRef()

  const history = useHistory()

  // 修改昵称简介抽屉组件显示状态
  const [open, setOpen] = useState({
    visible: false,
    type: '',
  })

  // 修改头像性别抽屉组件显示状态
  const [listOpen, setListOpem] = useState({
    visible: false,
    type: '',
  })

  // 关闭抽屉
  const onClose = () => {
    setOpen({
      visible: false,
      type: '',
    })
    setListOpem({
      visible: false,
      type: '',
    })
  }

  // 修改头像性别抽屉组件统一传参
  const config = {
    photo: [
      {
        title: '拍照',
        onClick: () => {},
      },
      {
        title: '本地选择',
        onClick: () => {
          fileRef.current.click()
        },
      },
    ],
    gender: [
      {
        title: '男',
        onClick: () => {
          onCommit('gender', 0)
        },
      },
      {
        title: '女',
        onClick: () => {
          onCommit('gender', 1)
        },
      },
    ],
  }

  // 修改内容
  const onCommit = async (type, value) => {
    if (value.length === 0) {
      return Toast.info('不能为空', 1)
    }
    await dispatch(
      editProfile({
        [type]: value,
      })
    )
    Toast.success('修改成功', 1)
    setOpen({
      visible: false,
      type: '',
    })
    setListOpem({
      visible: false,
      type: '',
    })
  }

  // 监听上传文件
  const onFileChange = async (e) => {
    const file = e.target.files[0]
    const fd = new FormData()
    fd.append('photo', file)

    await dispatch(updataPhoto(fd))
    Toast.success('修改头像成功', 1)
    onClose()
  }

  useEffect(() => {
    // 获取详细信息
    dispatch(getProfile())
  }, [dispatch])

  // 用户详细信息
  const info = useSelector((state) => state.profile.profile)

  // 修改生日
  const onBirthdayChange = (e) => {
    onCommit('birthday', dayjs(e).format('YYYY-MM-DD'))
  }

  // 退出
  const logoutFn = () => {
    // 提示框
    Modal.alert('温馨提示', '确定要退出吗', [
      { text: '取消' },
      {
        text: '确定',
        onPress: () => {
          dispatch(logout())
          history.replace('/login')
          Toast.info('退出成功', 1)
        },
      },
    ])
  }

  return (
    <div className={styles.root}>
      <div className="box">
        {/* 顶部导航 */}
        <NavBar>个人信息</NavBar>

        {/* 列表 */}
        <div className="wrapper">
          <List className="profile-list">
            <Item
              arrow="horizontal"
              extra={
                <span className="avatar-wrapper">
                  <img src={info.photo} alt="" />
                </span>
              }
              onClick={() => {
                setListOpem({
                  visible: true,
                  type: 'photo',
                })
              }}
            >
              头像
            </Item>
            <Item
              arrow="horizontal"
              extra={info.name}
              onClick={() => {
                setOpen({
                  visible: true,
                  type: 'name',
                })
              }}
            >
              昵称
            </Item>
            <Item
              arrow="horizontal"
              extra={
                <span className={info.intro ? '' : 'intro'}>
                  {info.intro || '未填写'}
                </span>
              }
              onClick={() => {
                setOpen({
                  visible: true,
                  type: 'intro',
                })
              }}
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <List.Item
              arrow="horizontal"
              extra={info.gender === 0 ? '男' : '女'}
              onClick={() => {
                setListOpem({
                  visible: true,
                  type: 'gender',
                })
              }}
            >
              性别
            </List.Item>
            <DatePicker
              mode="date"
              title="选择生日"
              value={new Date(info.birthday)}
              minDate={new Date(1900, 1, 1, 0, 0, 0)}
              maxDate={new Date()}
              onChange={onBirthdayChange}
            >
              <List.Item arrow="horizontal" extra={'2020-02-02'}>
                生日
              </List.Item>
            </DatePicker>
          </List>
        </div>

        {/* 上传头像 */}
        <input type="file" hidden ref={fileRef} onChange={onFileChange}></input>
        {/* 底部按钮 */}
        <div className="logout">
          <button className="btn" onClick={logoutFn}>
            退出登录
          </button>
        </div>
      </div>

      {/* 修改昵称简介抽屉组件 */}
      <Drawer
        position="right"
        className="drawer"
        sidebar={
          open.visible && (
            <EditInput
              onClose={onClose}
              type={open.type}
              onCommit={onCommit}
            ></EditInput>
          )
        }
        open={open.visible}
      >
        {' '}
      </Drawer>

      {/* 修改头像性别抽屉组件 */}
      <Drawer
        position="bottom"
        className="drawer-list"
        sidebar={
          listOpen.visible && (
            <EditList
              onClose={onClose}
              type={listOpen.type}
              config={config}
            ></EditList>
          )
        }
        open={listOpen.visible}
        onOpenChange={onClose}
      >
        {' '}
      </Drawer>
    </div>
  )
}
